/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
	<div>
		<div class="item-title">
			<div class="subject">
				<h3>搭配购套餐管理</h3>
				<h5>搭配购套餐管理</h5>
			</div>
		</div>

		<div class="explanation" style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;">
			<div class="bckopa-tips">
				<div class="title">
					<img src="@/static/images/handd.png" alt />
					<h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
				</div>
				<ul>
					<li>搭配购套餐管理, 平台可强制下架套餐,下架后商家不可重新上架，只有平台有权限重新上架.</li>
				</ul>
			</div>
			<span title="收起提示" id="explanationZoom" style="display: block;"></span>
		</div>

		<div class="mDiv">
			<div class="ftitle">
				<h3>搭配购套餐列表</h3>
				<h5>(共 {{totalCount}} 条记录)</h5>
			</div>
			<a href @click.prevent="refresh()" class="refresh-date">
				<div title="刷新数据" class="pReload">
					<i class="fa fa-refresh"></i>
				</div>
			</a>
		</div>

		<div class="tablebox">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column label="ID" prop="combination_id" width="80" show-overflow-tooltip></el-table-column>
				<el-table-column label="商品名称" prop="goods_name" width="120" show-overflow-tooltip></el-table-column>
				<el-table-column label="搭配购套餐名称" prop="title" width="120"></el-table-column>
				<el-table-column label="套餐内商品数量" prop="goods_count" width="120"></el-table-column>
				<el-table-column label="店铺名称" prop="store_name" width="130"></el-table-column>
				<el-table-column label="开始时间" prop="start_time_show" width="150"></el-table-column>
				<el-table-column label="结束时间" prop="end_time_show" width="150"></el-table-column>
				<el-table-column label="状态" width="90">
					<template slot-scope="scope">
						<span v-if="time > scope.row.start_time && time < scope.row.end_time">开始中</span>
						<span v-if="time < scope.row.start_time">未开始</span>
						<span v-if="time > scope.row.end_time">已过期</span>
					</template>
				</el-table-column>
				<el-table-column label="上架" width="90">
					<template slot-scope="scope">
						<span v-if="scope.row.is_on_sale == 1">是</span>
						<span v-else>否</span>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button-group>
							<el-button size="small" @click="changeStatus(scope.row, 1)" v-if="scope.row.status == 0" icon="el-icon-check">通过</el-button>
							<el-button size="small" @click="changeStatus(scope.row, 2)" v-if="scope.row.status == 0" icon="el-icon-close">拒绝</el-button>
							<el-button size="small" @click="isOnSale(scope.row,1)" icon="el-icon-circle-plus" v-if="scope.row.status == 1 && scope.row.is_on_sale != 1 && scope.row.end_time > time">上架</el-button>
							<el-button size="small" @click="isOnSale(scope.row,2)" icon="el-icon-remove" v-if="scope.row.status == 1 && scope.row.is_on_sale == 1">下架</el-button>
							<el-button size="small" @click="detail(scope.row)" icon="el-icon-zoom-in">详情</el-button>
							<el-button size="small" @click="delFn(scope.row)" icon="el-icon-delete">删除</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background class="paginationbox" @size-change="handleSizeChange" @current-change="handleCurrentChange"
			 :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
			 :total="totalCount"></el-pagination>
		</div>
	</div>
</template>

<script>
	import {
		getCollocationPage,
		updateCollocationStatus,
		isOnSaleCollocation,
		deleteCombinationById
	} from "@/utils/api";
	export default {
		data() {
			return {
				tableData: [],
				currentPage: this.$route.params.currentPage || 1,
				totalCount: 0,
				pageSize: 10,
				time: Date.parse(new Date()) / 1000
			};
		},
		components: {},
		created() {
			this.getPage();
		},
		methods: {
			handleSizeChange(e) {
				this.pageSize = e;
				this.getPage();
			},
			handleCurrentChange(e) {
				this.currentPage = e;
				this.getPage();
			},
			getPage() {
				var that = this;
				var params = {
					page: this.currentPage,
					size: this.pageSize
				};
				getCollocationPage(params).then(function(res) {
					that.tableData = res.records;
					that.totalCount = res.total;
					console.log(res);
				});
			},
			refresh() {
				this.getPage();
				this.$message({
					type: "success",
					message: "刷新成功！"
				});
			},
			changeStatus(row, status) {
				var that = this;
				var prompt = status == 1 ? "通过？" : "拒绝？";
				this.$confirm("确认" + prompt, "提示", {
						confirmButtonText: "是",
						cancelButtonText: "否",
						type: "warning"
					})
					.then(() => {
						updateCollocationStatus({
							id: row.combination_id,
							status: status
						}).then(function(res) {
							if (res.status == 1) {
								that.$message({
									type: "success",
									message: "操作成功!"
								});
								that.getPage();
							} else {
								that.$message.error({
									message: res.msg
								});
							}
						});
					})
					.catch(() => {
						that.$message.info({
							message: "已取消"
						});
					});
			},
			isOnSale(row, isOnSale) {
				var that = this;
				var state = isOnSale == 1 ? "上架" : "下架";
				this.$confirm("是否"+state+"该套餐?", "提示", {
						confirmButtonText: "是",
						cancelButtonText: "否",
						type: "warning"
					})
					.then(() => {
						isOnSaleCollocation({
							combination_id: row.combination_id,
							isOnSale: isOnSale
						}).then(function(res) {
							if (res.status == 1) {
								that.$message({
									type: "success",
									message: "操作成功!"
								});
								that.getPage();
							} else {
								that.$message.error({
									message: res.msg
								});
							}
						});
					})
					.catch(() => {
						that.$message.info({
							message: "已取消"
						});
					});
			},
			detail(row) {
				console.log(row.combination_id);
				this.$router.push({
					name: 'collocation_info',
					params: {
						id: row.combination_id,
						currentPage: this.currentPage
					}
				}) //进入编辑页 保存本页面页码数据
			},
			delFn(row) {
				var that = this;
				this.$confirm("是否删除该信息?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						deleteCombinationById(row.combination_id).then(function(res) {
							if (res.status == 1) {
								that.getPage();
								that.$message({
									type: "success",
									message: "删除成功!"
								});
							} else {
								that.$message({
									type: "error",
									message: res.msg
								});
							}
						});
					})
					.catch(() => {
						that.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			},
		}
	};
</script>

<style scoped>
	.searchinput {
		width: auto;
	}
</style>
